<script setup lang="js">

import {reactive, ref} from 'vue';

import  * as  commonDict from '@/utils/commonDict.js'

import {PlusOutlined} from '@ant-design/icons-vue';

import * as menuApi from '@/api/menuApi'
import MenuAddForm from '@/views/sys/menu/MenuAddForm.vue';
import {message} from 'ant-design-vue';

const columns = [
  {
    title: '显示名称',
    dataIndex: 'name',
    width: 260
  },
  {
    title: '图标',
    dataIndex: 'icon',
    width: 100
  },
  {
    title: '类型',
    dataIndex: 'menuType',
    width: 100
  },
  {
    title: '路由地址',
    dataIndex: 'path',
    width: 100
  },
  {
    title: '是否可见',
    dataIndex: 'visible',
    width: 100
  },
  {
    title: '默认菜单',
    dataIndex: 'defaultMenu',
    width: 100
  },
  {
    title: '排序',
    dataIndex: 'orderNum',
    width: 100
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100
  },
]

const menuRef = ref(null)
const loading = ref(false)



let tableData = ref([])


const loadData =  () => {
  loading.value = true
  menuApi.fetchMenuTree().then(x => {
    tableData.value = x
    loading.value = false
  }).finally(() => loading.value = false)
}
loadData()


function handleDelete(id) {
  loading.value = true
  menuApi.deleteMenu(id).then(() => {
    message.success('删除成功')
    loadData()
  }).finally(() => loading.value = false)
}


</script>

<template>

  <menu-add-form @save-successful="loadData" ref="menuRef"></menu-add-form>

  <a-card :bordered="false" class="mt-2">
    <a-table bordered
             :row-key="(record) => record.id"
             :loading="loading" :columns="columns"  :data-source="tableData" >

      <template #title>
        <div class="flex justify-between">
          <a-space>
            <a-button  @click="menuRef.onOpen()" type="primary">
              <template #prefix>
                <PlusOutlined/>
              </template>
              新增
            </a-button>
          </a-space>
        </div>

      </template>

      <template #bodyCell="{ text, record, column }">

        <template v-if="column.dataIndex === 'visible'">
          <a-tag :color="commonDict.visible[text].tag" :bordered="false">{{ commonDict.visible[text].name}}</a-tag>
        </template>

        <template v-if="column.dataIndex === 'menuType'">
          <a-tag :color="commonDict.menuType[text].tag">{{commonDict.menuType[text].name}}</a-tag>
        </template>

        <template v-if="column.dataIndex === 'action'">
          <a-space>
            <a-button @click="menuRef.onOpen(record.id)" type="link">编辑</a-button>
            <a-popconfirm
                title="是否确认删除?"
                ok-text="删除"
                cancel-text="取消"
                @confirm="handleDelete(record.id)"
            >
            <a-button type="link" :disabled="record.defaultMenu === '1'"  danger>删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>

      </template>

    </a-table>
  </a-card>
</template>

<style scoped>

</style>
